<template>
	<view style="background-color: #F4F6F7">
		<!-- 核销成功 -->
		<view class="box" v-if="!show">
			<!-- <view class="font32 fontw">
				选择核销技师
			</view> --> <u-sticky bgColor="#fff">
			<u-tabs :list="list1" @click="click"></u-tabs>
			 </u-sticky>
			 <view class="" style="padding: 30rpx;">
			 	<view class="item" v-for="(item,index) in list" :key="item.id"
			 		style="display: flex;align-items: center;justify-content: space-between;margin-top: 24rpx;" v-if="lcurrent == item.type">
			 		<view class="" style="display: flex;">
			 			<image :src="item.work_img" mode="aspectFill"
			 				style="width: 128rpx;border-radius: 16rpx;margin-right: 16rpx;height: 128rpx;"></image>
			 			<view class="font24 fontw">
			 				{{item.coach_name}}
			 			</view>
			 		</view>
			 		<view class="">
			 			<u-switch v-model="item.zhuan" @change="change(index)"></u-switch>
			 		</view>
			 	</view>
			 </view>
		</view>
		<view class="pages-home rel" v-if="show">
			<banner :list="detail.imgs" :margin="0" :autoplay="true" :height="400" :indicatorActiveColor="primaryColor">
			</banner>
			<view class="fill-base pd-lg">
				<view class="f-sm-title c-title text-bold">{{detail.title}}</view>
				<view
					:style="detail.material_price*1>0?'display: flex;align-items: center;justify-content: space-between;':'display: flex;justify-content: flex-end;'">
					<view class="f-caption c-caption mt-sm" v-if="detail.material_price*1>0">
						物料费 ¥{{detail.material_price}}
					</view>
					<view class="" style="width: 400rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;">
					</view>
				</view>
				<view class="flex-y-baseline f-desc c-caption mt-sm">
					<view class="flex-y-baseline flex-1">
						<view class="flex-y-baseline f-icontext c-orange text-bold mr-sm">
							<b class="f-paragraph c-orange">￥</b>
							<view class="f-big-title">
								{{detail.price}}
							</view>
						</view>
						<view class="text-delete mr-md" v-if="detail.init_price">¥{{detail.init_price}}</view>
						<view class="flex-y-baseline flex-1" v-if="detail.is_diet == 0">
							<i class="iconfont icon-shijian mr-sm" :style="{ color: primaryColor }"></i>
							{{detail.time_long}}分钟
						</view>
						<view>超{{detail.total_sale}}人选择</view>
					</view>
				</view>
			</view>
			<view class="space-md"></view>
			<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
				width="33.3%" height="100rpx"></tab>
			<view class="space-md"></view>
			<view class="fill-base pd-lg f-paragraph c-desc">
				<view class="c-title text-bold mb-md">{{tabList[activeIndex].title}}</view>
				<parser :html="detail[rule[activeIndex]]" @linkpress="linkpress" show-with-animation lazy-load>加载中...
				</parser>
			</view>
		</view>
		<view class="" style="height: 140rpx;"></view>
		<view class="" style="position: fixed;bottom: 0;background-color: #fff;width: 100%;padding: 30rpx;">
			<u-button type="primary" :text="text" @click="huanqi"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	import parser from "@/components/jyf-Parser/index"
	export default {
		components: {
			parser
		},
		data() {
			return {
				text: '扫码核销',
				diet: '',
				code: '',
				cId: 0,
				list: [],
				detail: {},
				show: false,
				tabList: [{
					title: '项目介绍',
					id: 0
				}, {
					title: '禁忌说明',
					id: 1,
				}, {
					title: '下单须知',
					id: 2
				}],
				rule: {
					0: 'introduce',
					1: 'explain',
					2: 'notice'
				},
				current:0,
				lcurrent:0,
				activeIndex: 0,
				list1:[
					{name:'保养师'},
					{name:'营养师'}
				]
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor
		}),
		onLoad() {
			this.getCoca()
			// this.huanqi()
		},
		methods: {
			async getCoca() {
				let data = await this.$api.shareholder.storeCoachs()
				data.map(item => {
					item.zhuan = false
				})
				this.list = data
			},
			click(e){
				console.log(e);
				this.current = e.index
				if(e.index == 1){
					this.lcurrent = Number(e.index)+1
				}
				if(e.index == 0){
					this.lcurrent = e.index
				}
			},
			huanqi() {
				let that = this
				let id = 0
				that.list.map(item => {
					if (item.zhuan) {
						id = item.id
					}
				})
				that.cId = id
				if (id == 0) {
					uni.showToast({
						icon: "error",
						title: '请选择保养师',
						duration: 1000
					})
					return
				}
				uni.scanCode({
					onlyFromCamera: true,
					scanType: 'qrCode',
					success: function(res) {
						let codeList = res.result.split('&')
						let diet = codeList[0].split('=')[1]
						let code = codeList[1].split('=')[1]
						that.code = code
						that.diet = diet
						that.getInfos(code)
					},
					fail: function(err) {
						// uni.navigateBack()
					}
				});
			},
			async getInfos(code) {
				let res = await this.$api.user.orderinfo({
					search_type: 'order_code',
					order_code: code
				})
				this.getService(res.order_goods[0].service_id)
			},
			async getService(id) {
				let res = await this.$api.service.serviceInfo({
					id: id
				})
				this.detail = res
				this.text = '确认核销'
				this.show = true
			},
			hexiao() {
				let that = this
				let autograph = uni.getStorageSync('autograph')
				uni.showModal({
					title: '提示',
					content: '确定核销订单号:' + that.code,
					success: async function(ress) {
						if (ress.confirm) {
							if (that.diet == 0) {
								uni.request({
									url: 'https://wx.caobenjiankang.com/?i=666&m=longbing_massages_city&s=massage/app/indexorder/orderWriteOff&urls=massage/app/indexorder/orderWriteOff', //仅为示例，并非真实接口地址。
									data: {
										order_code: that.code,
										coach_id: that.cId,
										is_store: 1
									},
									header: {
										'autograph': autograph //自定义请求头信息
									},
									success: (res) => {
										console.log(res.data);
										if (res.data.code == 200) {
											uni.showModal({
												title: '提示',
												content: '核销成功',
												success: function(resd) {
													if (resd.confirm) {
														console.log('用户点击确定');
														that.text = '扫码核销'
														that.show = false
														that.getCoca()
													} else if (resd.cancel) {
														console.log('用户点击取消');
														that.text = '扫码核销'
														that.show = false
														that.getCoca()
													}
												}
											});

										} else {
											uni.showToast({
												title: res.data.error,
												icon: 'error',
												duration: 1000
											})
											that.text = '扫码核销'
											that.show = false
											that.getCoca()
										}
									}
								});
							}
							if (that.diet == 1) {
								uni.request({
									url: 'https://wx.caobenjiankang.com/?i=666&m=longbing_massages_city&s=massage/app/indextreat/updateTreatOrder&urls=massage/app/indextreat/updateTreatOrder', //仅为示例，并非真实接口地址。
									data: {
										order_code: that.code,
										coach_id: that.cId,
										is_store: 1
									},
									header: {
										'autograph': autograph //自定义请求头信息
									},
									success: (res) => {
										console.log(res.data);
										if (res.data.code == 200) {
											uni.showModal({
												title: '提示',
												content: '核销成功',
												success: function(resd) {
													if (resd.confirm) {
														console.log('用户点击确定');
														that.text = '扫码核销'
														that.show = false
														that.getCoca()
													} else if (resd.cancel) {
														console.log('用户点击取消');
														that.text = '扫码核销'
														that.show = false
														that.getCoca()
													}
												}
											});

										} else {
											uni.showToast({
												title: res.data.error,
												icon: 'error',
												duration: 1000
											})
											that.text = '扫码核销'
											that.show = false
											that.getCoca()
										}
									}
								});
							}

						} else if (ress.cancel) {
							that.text = '扫码核销'
							that.show = false
							that.getCoca()
						}
					}
				});
			},
			change(e) {
				this.list.map(item => {
					item.zhuan = false
				})
				this.list[e].zhuan = !this.list[e].zhuan
			},
		}
	}
</script>

<style scoped>
	.box {
		
	}

	.item {
		padding: 16rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
	}
</style>